<template>

	<!-- 切换弹框 -->
	<el-dialog title="数据同步" class="sysDialog wjjtDialog" :visible.sync="tipsVisible" width="900px"
		:before-close="tipsVisibleClose">
		<div class="bdBody">
			<div class="tipInfo">
				<el-tooltip placement="top" effect="light">
					<div slot="content" class="tooltipBox">
						<p>1.第一次初始化保障组，需要进行全量加增量</p>
						<p>2.数据同步配置发生改变，需要进行全量加增量</p>
						<p>3.自动切换后保障机回切业务机，需要进行全量加增量</p>
						<p>4.切换过程中出现故障，修复之后建议点击增量传输</p>
					</div>
					<i class="infoBtn el-icon-info"></i>
				</el-tooltip>
				提示:{{group_switch_copy_info}}
			</div>

			<!-- 帮助引导 -->
			<guidance class="dialogBtn" title="" :list="sjtbList"></guidance>
			<div class="bdBodyBot" v-show="isLinux">
				<el-checkbox v-model="snapshotMod">开启快照</el-checkbox>
			</div>

			<div class="bdBodyBot">
				<!-- <el-checkbox :disabled="
	            guaranteeConfig.machineState == 1
	          " v-model="isOpenIncrement">文件比对&同步</el-checkbox> -->

				<el-checkbox v-model="isOpenIncrement">文件比对&同步</el-checkbox>
				<span id="zltbP"></span>

				<span class="margL50" v-show="isOpenIncrement">忽略相同文件</span>
				<el-tooltip placement="top" effect="light" v-show="isOpenIncrement">
					<div slot="content" class="tooltipBox">
						<p>未选择忽略条件时直接覆盖目标机保障目录</p>
					</div>
					<i class="infoBtn2 el-icon-info"></i>：
				</el-tooltip>

				<el-checkbox-group v-model="ignore" class="margL15" v-show="isOpenIncrement">
					<el-checkbox v-for="(item,i) in ignoreOptions" :key="i" :label="item.dictValue">
						{{item.dictLabel}}
					</el-checkbox>
				</el-checkbox-group>


				<span v-show="isOpenIncrementLoding " style="color: #67c23a" class="flotR">
					<i class="el-icon-loading"></i>
					同步中...
				</span>
				<!-- <hr>
				{{'!isOpenIncrementLoding    |'+ isOpenIncrementLoding}}
				<hr>
				{{'isOpenIncrement    |' + isOpenIncrement}}
		
				<hr>
				{{'switchRsyncDirLogStatus != 0    |'+ switchRsyncDirLogStatus }} -->

				<el-button type="primary" class="flotR" size="mini" v-show="!isOpenIncrementLoding && isOpenIncrement "
					@click="startIncrement">全量同步</el-button>

				<div class="boxTitleP">比对&同步 日志</div>
				<div id="tbrzBox" class="bdBodyTopTuBox h250pxBox">
					<el-scrollbar class="center-scrollbar h250px" ref="scrollbar">
						<!-- 	<el-table :data="switchRsyncDirLogData" style="width: 100%">
							<el-table-column prop="message" label="信息">
								<template slot-scope="scope">
									{{ scope.row }}
								</template>
							</el-table-column>
						</el-table> -->
						<div v-for="(item,index) in switchRsyncDirLogData" :key="index" class="tbrzlog">

							<span v-html="item "></span>
						</div>

						<div v-show="switchRsyncDirLogData.length == 0" class="nullLog">日志信息为空</div>
					</el-scrollbar>
				</div>

				<div style="height:124px">
					<div v-show="NodeRow.dataMonitorEnabled">
						<div class="boxTitleP"></div>
						<el-checkbox id="disabledCheckbox" v-model="isSyncDataStart">增量数据包同步</el-checkbox>

						<span class="flotR" v-show="!isOpenIncrementLoding">
							<span v-show="pattern != 3" style="color: #67c23a">
								<i class="el-icon-loading"></i>
								同步中...
							</span>

							<el-button v-if="pattern == 3  && isSyncDataStart "
								type="primary" size="mini"
								:disabled="isOpenIncrementLoding > 0"
								@click="syncDataStartFn(true)">增量传输</el-button>

							<el-button v-show="pattern != 3 && isSyncDataStart" type="primary" class="ml20" size="mini"
								@click="syncDataStartFn(false)">暂停传输</el-button>
						</span>


						<!-- <el-button v-else-if="!issyncDataStatusLoding && isOpenIncrement &&  switchRsyncDirLogStatus == 0 && !issyncDataStatus"
					 type="primary" class="flotR" size="mini" @click="syncDataStartFn">开始传输
					 </el-button> -->
						<div class="boxTitleP"></div>


						<div class="h250pxBox">
							<div class="floatBox centerbox" >
								<div class="leftBox">
									<el-row :gutter="20">
										<el-col :span="12">
											<span>当前节点: </span>
											<span>{{ywjData.ip}}</span>
									 </el-col>
										<el-col :span="12">
											<span>队列大小: </span>
											<span v-if="ywjData.queue == ''">初始化 </span>
											<span>
												{{ywjData.queue == -1? '--':ywjData.queue+' 个'}}
											</span>
										</el-col>
										<el-col :span="12">
											<span>传输模式: </span>
											<span v-show="!ywjData.pattern">
												初始化
											</span>
											<span v-for="item in options" :key="item.dictValue"
												v-show="ywjData.pattern == item.dictValue"
												:style="'color:' + item.extendVal">{{item.dictLabel}}</span>
										</el-col>
										
										<el-col :span="12" v-show="!isOpenflag">
											<span>延迟时间: </span>
										
											<span v-if="ywjData.delayTime == ''">初始化 </span>
											<el-tooltip :content="ywjData.delayTime" placement="top" effect="light"  v-else-if="typeof(ywjData.delayTime) == 'string' && ywjData.delayTime.length>11">
											  <span class="nowapHidden" >{{ywjData.delayTime}}</span>
											</el-tooltip>
											<span v-else>
												{{ywjData.delayTime == -1 ? '--':ywjData.delayTime}}
											</span>
										
										</el-col>
										
										
									</el-row>

								</div>
								<div class="rightBox" :class="isOpenflag?'floatLeft':''">
									<el-row :gutter="20">
										<el-col :span="12">
											<span>当前节点: </span>
											<span>{{bzjData.ip}}</span>
										</el-col>
										<el-col :span="12">
											<span>队列大小: </span>
											<span v-if="bzjData.queue == ''">初始化 </span>
											<span v-else>
												{{bzjData.queue == -1? '--':bzjData.queue+' 个'}}
											</span>
										</el-col>

										<el-col :span="12">
											<span>传输模式: </span>
											<span v-show="!bzjData.pattern">
												初始化
											</span>
											<span v-for="item in options" :key="item.dictValue"
												v-show="bzjData.pattern == item.dictValue"
												:style="'color:' + item.extendVal">{{item.dictLabel}}</span>
										</el-col>
										
										
										<el-col :span="12"  v-show="isOpenflag">
											<span>延迟时间: </span>
											
											<span v-if="bzjData.delayTime == ''">初始化 </span>
											<el-tooltip :content="bzjData.delayTime" placement="top" effect="light"  v-else-if="typeof(ywjData.delayTime) == 'string' && ywjData.delayTime.length>11">
											  <span class="nowapHidden" >{{bzjData.delayTime}}</span>
											</el-tooltip>
											<span v-else>
												{{bzjData.delayTime == -1 ? '--':bzjData.delayTime}}
											</span>
								
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<span slot="footer" class="dialog-footer">
			<el-button @click="tipsVisibleClose">取 消</el-button>
			<!-- 开启同态 不开增量 -->
			<el-button type="primary" v-if="isOpenIncrement  && switchRsyncDirLogStatus === 'END' && !isSyncDataStart"
				@click="startSwitching">开始切换</el-button>
			<!-- 不开启同态  开启增量-->
			
			
			<!-- 
				transferEnabled : 表示是否开启增量还是暂停增量
				pattern：传输模式如果有一个等于3（阻塞）
				isOpenIncrement： 是否勾选全量
				switchRsyncDirLogStatus：END 表示全量任务完成
				
				isSyncDataStart：是否勾选增量
				issyncDataStatusLoding：-1 表示两边的数据都是小于500
			 -->
			
			
			<el-button type="primary"
				v-else-if="transferEnabled && pattern != 3  && !isOpenIncrement  && isSyncDataStart  && issyncDataStatusLoding == -1"
				@click="startSwitching">开始切换</el-button>
			<!-- 同时开启 -->
			<el-button type="primary"
			
				v-else-if="transferEnabled && pattern != 3  && isOpenIncrement && switchRsyncDirLogStatus === 'END'  && isSyncDataStart  && issyncDataStatusLoding == -1"
				@click="startSwitching">开始切换</el-button>
			<el-button type="info" disabled v-else>开始切换</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		groupStatus,

		manualSwitch,
		syncDataStart,
		syncDataStatus,
		editDataStatus,
		syncChangeDataStart,
		dbQueueNum,

	} from "@/api/console/group";

	import {

		switchRsyncDir,
		switchRsyncDirLog
	} from "@/api/monitor/node";
	import {
		getGroupNodeNioInfo,
	} from "@/api/console/senior";

	import {
		listConfig
	} from "@/api/system/config";

	export default {
		data() {
			return {
				options: [],
				importantConfig: {},
				guaranteeConfig: {},
				ywjData: {
					id: '',
					ip: '',
					pattern: '',
					writedata: '',
					returndata: '',
					queue: '',
				},
				bzjData: {
					id: '',
					ip: '',
					pattern: '',
					writedata: '',
					returndata: '',
					queue: '',
				},
				isLinux: false,
				tipsVisible: false,
				//默认开启增量数据包同步
				isSyncDataStart: true,
				isOpenIncrementLoding: 0,
				NodeRow: {},
				dataMonitorEnabled: false,
				dialogChangeVisible: false,
				startParms: {
					id: '',
					initDataStatus: 0
				},
				manualSwitchFlag: '',
				groupId: '',
				//是否开始同步增量状态
				isOpenIncrement: true,
				//是否开始同步增量弹框 保留之前的左右信息转态
				isOpenflag: false,
				//同步状态  status ： start   end  error   -1 初始化
				switchRsyncDirLogStatus: -1,
				//其同步日志数据
				switchRsyncDirLogData: [],
				importantConfigHaPort: '',
				syncDataStatusTime: '',
				group_switch_copy_info: '',
				//页面显示数据包数量
				showDataTb: {
					'dq': '待同步',
					'mb': '待同步',
				},
				issyncDataStatusLoding: 0,
				ignoreOptions: [],
				ignore: [],
				id: '',
				showMsg: false,
				//linux 版本是否开启快照，页面用true false ,传参改成 “S”，“N”
				snapshotMod: true,
				//判断增量传输是否是传输模式  ture 传输    false 阻塞
				transferEnabled: true,
				//传输模式是否是阻塞模式  3表示阻塞模式
				pattern:"",
				sjtbList: [{
						'title': '1.数据同步',
						'helpMsg': '数据同步',
					},
					{
						'title': '2.没有全量同步按钮',
						'helpMsg': '没有全量同步按钮',
					},
					{
						'title': '3.没有增量传输按钮',
						'helpMsg': '没有增量传输按钮',
					},
				],
			};
		},
		mounted() {
			//忽略类型
			this.getDicts('hcopy_ignore').then(response => {
				this.ignoreOptions = response.data;
			})
			this.getDicts('group_node_nio_status').then(response => {
				if (response.data) {
					this.options = response.data;
				} 
			})

			listConfig({
				'pageNum': 1,
				'pageSize': 1,
				'configKey': "group_switch_copy_info"
			}).then(response => {
				if (response && response.rows.length > 0) {
					this.group_switch_copy_info = response.rows[0].configValue;
				} else {
					this.group_switch_copy_info = '';
				}
			})
		},
		methods: {
			startSwitching() {
				this.$emit('startSwitching', this.isOpenflag);
			},

			//关闭 提示框
			tipsVisibleClose() {
				this.tipsVisible = false;
			},
			// ******************      增量弹框   start     *********************************************************
			//增量数据包同步
			syncDataStartFn(transferEnabled) {
				var vue = this;

				let transferEnabledText = transferEnabled ? " 开启增量数据包同步 " : " 暂停增量数据包同步"
				this.$confirm('此操作将' + transferEnabledText + ', 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					syncDataStart({
						"id": this.id,
						'flag': this.isOpenflag,
						"transferEnabled": transferEnabled, // true开启 false暂停
					}).then(response => {
						if (response.data) {
							vue.transferEnabled = transferEnabled;
							if (!transferEnabled) {
								vue.issyncDataStatusLoding = -1;
							} else {
								vue.issyncDataStatusLoding = 1;
							}

							//修改数据同步 按钮显示的状态
							this.startParms.id = this.id;
							editDataStatus(this.startParms).then(response => {
								// console.log('response')
							})

							this.getGroupNodeNioInfoFn();

						} else {
							this.$message({
								message: '同步失败',
								type: 'warning'
							});
						}
					})
				}).catch(() => {});

			},
			//增量数据包同步 日志

			getGroupNodeNioInfoFn() {
				var vue = this;
				getGroupNodeNioInfo({
					id: this.id,
				}).then(res => {
					if (res.data) {

						vue.ywjData = res.data[vue.ywjData.ip];
						vue.bzjData = res.data[vue.bzjData.ip];
						//根据切换 的方向获取传输状态
						var pattern = !this.isOpenflag?vue.ywjData.pattern:vue.bzjData.pattern;
						
						vue.pattern = pattern;
						
						
						
						if (vue.ywjData.queue > 700 || vue.bzjData.queue > 700) {
							vue.showMsg = true;
							vue.issyncDataStatusLoding = 1;
						}
						if (vue.ywjData.queue < 500 && vue.bzjData.queue < 500) {

							//-1 代表同步完成
							vue.issyncDataStatusLoding = -1;
							// if (vue.showMsg) {
							// 	vue.$message({
							// 		message: '增量数据包同步完成',
							// 		type: 'success'
							// 	});
							// }

							// vue.showMsg = false;

							// if (vue.switchRsyncDirLogStatus != 'END') {
							// 	this.isOpenIncrement = false;

							// }

						}

						if (vue.syncDataStatusTime) {
							vue.syncDataStatusTime = clearTimeout(vue.syncDataStatusTime)
						}
						vue.syncDataStatusTime = setTimeout(function() {
							vue.getGroupNodeNioInfoFn();
						}, 3000)

					}
				})
			},


			// 			manualSwitchFn(flag) {
			// 				if(this.dataMonitorEnabled){
			// 					this.manualSwitchFlag = flag;
			// 					this.dialogChangeVisible = true;
			// 				}else{
			// 					this.startSwitching(flag);
			// 				}
			// 			},

			getIncrementLog(isFirst) {
				var vue = this;
			// console.log(isFirst)
				switchRsyncDirLog({
					id: this.id,
					'flag': this.isOpenflag,
				}).then(res => {
					if (res.data) {

						if (res.data.status == 'END' && isFirst == 'first') {
							//如果是上个页面打开的默认查询,查询结果是END 结束就需要  中断
							return
						}

						this.switchRsyncDirLogStatus = res.data.status;
						this.switchRsyncDirLogData = this.switchRsyncDirLogData.concat(res.data.log);
						//合并数据后滚动条 自动定位在最下
						if (this.$refs.scrollbar) {
							let scrollbarEl = this.$refs.scrollbar.wrap;
							scrollbarEl.scrollTop = this.switchRsyncDirLogData.length * 53;
						}

						vue.isOpenIncrementLoding = 1;
						
						if (res.data.status == 'WARN') {
							console.error(res.data.errMsg)
						}
						
						if (res.data.status == 'ERROR') {
							vue.isOpenIncrementLoding = 0;
							vue.getIncrementLogTime = clearTimeout(vue.getIncrementLogTime);
							this.$message({
								message: res.data.errMsg,
								type: 'error'
							});
							vue.switchRsyncDirLogStatus = -1;
							return false;
						}

						if (res.data.status == 'END') {
							vue.switchRsyncDirLogStatus = 'END';
							vue.isOpenIncrementLoding = 0;
							vue.getIncrementLogTime = clearTimeout(vue.getIncrementLogTime);

							this.$message({
								message: '文件比对同步完成',
								type: 'success'
							});
							return false;
						}


						//如果没有结束，则开启下一个任务
						if (vue.getIncrementLogTime) {
							vue.getIncrementLogTime = clearTimeout(vue.getIncrementLogTime)
						}
						vue.getIncrementLogTime = setTimeout(() => {
							// console.log('如果没有结束，则开启下一个任务')
							vue.getIncrementLog()
						}, 3000)

					}
				})
			},
			//同步增量
			startIncrement() {
				var vue = this;
				// 			this.getIncrementLog();
				// 			return false;
				var ignore = this.ignore.toString()
				
				this.$confirm('此操作将 全量同步数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
						this.switchRsyncDirLogData = [];
					if (vue.syncDataStatusTime) {
						vue.syncDataStatusTime = clearTimeout(vue.syncDataStatusTime)
					}
					vue.getGroupNodeNioInfoFn();
					
					//linux 需要增加是否开启快照
					var snapshotMod = this.snapshotMod ? 's' : 'n';

					this.isOpenIncrementLoding = true;
					switchRsyncDir({
						id: this.id,
						'flag': this.isOpenflag,
						'ignore': ignore,
						snapshotMod: snapshotMod,
					}).then(response => {
						if (response.data) {
							//修改数据同步 按钮显示的状态
							this.startParms.id = this.id;
							editDataStatus(this.startParms).then(response => {
								console.log('response')
							})
							vue.getIncrementLog();

						} else {
							this.$message({
								message: '文件同步失败',
								type: 'error'
							});
							this.isOpenIncrementLoding = false;
						}
					})
				}).catch(() => {});
			},

		},
	}
</script>

<style scoped>

	.flexBox {
		display: flex;
		justify-content: space-between;
	}

	.h400 {
		height: 344px;
	}

	.tipInfo {
		color: #a09e9e;
		margin-top: -10px;
	}

	.boxTitleP {
		margin-top: 15px;
		color: gray;
	}

	.h250pxBox {
		margin-top: 5px;
		border: 1px solid #e8e7e7;
		border-radius: 2px;
	}

	.centerbox {
		padding: 10px;
	}

	.centerbox div {
		padding: 5px;
	}

	.nullLog {
		text-align: center;
		margin-top: 50px;
		color: #a09e9e;
	}

	.h250px {
		height: 250px;
		width: 100%;
	}
	
	
	
	.leftBox,
	.rightBox {
		flex: 1;
	}

	.rightBox {
		border-left: 1px solid #e4e4e4;
	}

	.flotR {
		float: right;
	}

	.tbrzlog {
		color: #606266;
		padding: 4px 0;
	}

	.margL15 {
		margin-left: 15px;
	}

	.margL50 {
		margin-left: 80px;
	}

	.switchBox {
		margin-left: -30px;
		padding: 10px;
		text-align: center;
		position: relative;
	}

	.switchBox .bigBtn {
		display: block;
		height: 60px;
		width: 60px;
		margin: 0 auto;
		margin-bottom: 10px;
		position: relative;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 1px 2px 3px #c9c9c9;
		transition: all 0.4s;
	}

	.switchBox .bigBtn:hover {
		box-shadow: 1px 1px 6px grey;
	}

	.onBtn {
		background-color: #4ecc8d;
	}

	.offBtn {
		background-color: #c8c9cc;
	}




	.switchBox p {
		margin: 6px;
		color: #878787;
	}

	.ml0 {
		margin-left: 10px;
	}

	.infoBtn {
		margin: 16px;
	}

	.infoBtn2 {
		margin: 0 4px;
	}

	.margL15 {
		display: inline-block;
	}
	.ml20{
		margin-left:20px;
	}
	.floatBox > div{
		width: 50%;
		display: inline-block;
	}
	.floatLeft{
		float:left;
		border-left: 0;
		border-right: 1px solid #e4e4e4;
	}
	.nowapHidden{
		display: inline-block;
		width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 13px;
		vertical-align: middle;
	}
</style>
<style>
	#disabledCheckbox span {
		color: #1890ff;
	}

	#disabledCheckbox .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #1890ff;
	}
	.h250px  > .center-scrollbar{
		padding-left: 10px;
	}
	.h250px  > .el-scrollbar__wrap{
		overflow-x: hidden;
	}
</style>
